import React, { Component } from 'react';
import { Input, Button, List } from 'antd'
import store from './../../store'
import './home.less'
import { inputSearchAction, btnConfirmAction, delListItemAction } from './../../store/actionCreators.js'

class homePage extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState()
    console.log(this.state);
    store.subscribe(this.storeChange) //订阅Redux的状态
  }
  storeChange=()=>{
    this.setState(store.getState())
  }
  inputChange=(e)=>{
    console.log(e.target.value);
    if(!e.target.value){
      return false
    }else{
      const actions = inputSearchAction(e.target.value)
      store.dispatch(actions)
    }
  }
  btnConfirm=()=>{
    const action = btnConfirmAction()
    store.dispatch(action)
  }
  clickHandleList=(index)=>{
    const action = delListItemAction(index)
    store.dispatch(action)
  }
  render() { 
    return ( 
      <div className="wrap">
        <Input className="searchInput" placeholder={this.state.inputValue} 
          onChange={this.inputChange} 
          value={this.state.inputValue}
        />
        <Button type="primary" onClick={this.btnConfirm}>确定</Button>
        <List
          className="list"
          bordered
          dataSource={this.state.list}
          renderItem={(item,index) => (
            <List.Item onClick={this.clickHandleList.bind(this,index)}>{item}</List.Item>
          )}
        />  
      </div>
    );
  }
}
 
export default homePage;